<!--

 * @Description: 工具栏
-->
<template>
  <div class="operating-area">
    <!-- 头部操作按钮区域 start -->
    <!-- 操作左侧区域 start -->
    <!-- <div class="left-btn-box">
      <template v-for="item in clientList" :key="item.value">
        <div
          :class="{ active: item['intValue'] === client, btn: true, create: isCreate }"
          @click="
            () => {
              if (!isCreate) return;

              $emit('changeClient', item['intValue']);
            }
          "
        >
          <Icon :icon="iconMap[item.label]" size="16" />
        </div>
      </template>
    </div> -->
    <!-- 操作左侧区域 end -->
    <div class="center-btn-box">
      <!-- <a :class="{ disabled: !canUndo }" :disabled="!canUndo" @click="undo">
        <Icon icon="revoke|svg" />
        <span>撤回</span>
      </a>
      <a @click="redo" :class="{ disabled: !canUndo }" :disabled="!canUndo">
        <Icon icon="recovery|svg" />
        <span>恢复</span>
      </a> -->

      <Popconfirm
        placement="bottomLeft"
        title="是否确认清空所有控件？"
        @confirm="$emit('handleClearFormItems')"
      >
        <a>
          <Icon icon="clear|svg" />
          <span>清空</span>
        </a>
      </Popconfirm>
    </div>
    <div class="right-btn-box">
      <!-- <a @click.stop="$emit('handleOpenImportJsonModal')">
        <Icon icon="download|svg" />
        <span>导入</span>
      </a>
      <a class="ml-2" @click.stop="$emit('handleOpenJsonModal')">
        <Icon icon="upload|svg" />
        <span>生成</span>
      </a> -->
    </div>
  </div>
  <!-- 操作区域 end -->
</template>
<script lang="ts">
  import { Popconfirm } from 'ant-design-vue';
  import { defineComponent, inject, reactive, toRefs, PropType } from 'vue';
  import { UseRefHistoryReturn } from '@vueuse/core';
  import { IFormConfig } from '../../../typings/v-form-component';
  import Icon from '/@/components/Icon/index';

  interface IToolbarsConfig {
    type: string;
    title: string;
    icon: string;
    event: string;
  }

  export default defineComponent({
    name: 'OperatingArea',
    components: {
      Icon,
      Popconfirm,
    },
    props: {
      isCreate: {
        type: Boolean,
        default: false,
      },

      clientList: {
        type: Array as PropType<LabelValueOptions>,
        default: () => [],
      },
    },
    setup() {
      const state = reactive<{
        toolbarsConfigs: IToolbarsConfig[];
      }>({
        toolbarsConfigs: [
          {
            title: 'PC',
            type: 'preview',
            event: 'handlePreview',
            icon: 'ant-design:chrome-filled',
          },
        ],
      });
      const historyRef = inject('historyReturn') as UseRefHistoryReturn<IFormConfig, IFormConfig>;
      const { undo, redo, canUndo, canRedo } = historyRef;

      return { ...toRefs(state), undo, redo, canUndo, canRedo };
    },
  });
</script>

<style lang="less" scoped>
  //noinspection CssUnknownTarget
  @import url('../styles/variable.less');

  .operating-area {
    border-bottom: 1px solid @border-color;
    font-size: 16px;
    text-align: left;
    height: @operating-area-height;
    line-height: @operating-area-height;
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: @component-background;

    a {
      color: #666;

      &.disabled,
      &.disabled:hover {
        color: #999;
      }

      &:hover {
        color: @primary-color;
      }

      > span {
        font-size: 14px;
        padding-left: 2px;
      }
    }

    .left-btn-box {
      width: 89px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      background-color: rgba(43, 98, 161, 0.05);

      .btn {
        width: 40px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        margin-left: 1px;
        transition: background ease 0.3s;

        &.active {
          color: @title-text-color;
          border-radius: 4px;
          background-color: @primary-background-color;
        }

        &.create {
          cursor: pointer;

          &:hover {
            .active();
          }
        }
      }
    }
  }
</style>
